<template>
  <section class="page-content">
    <div v-loading="loading" class="loading">
      <div class="order-detail" v-if="order !== null" >
        <el-row>
          <el-col :span="24">
            基本信息
          </el-col>
          <el-col :span="8">
            <ul>
              <li><span class="item">订单ID：</span> <span>{{order.id}}</span></li>
              <li><span class="item">订单号：</span> <span>{{order.order_sn}}</span></li>
              <li><span class="item">订单状态：</span> <span> {{order.order_status_desc}} / {{order.pay_status_desc}} / {{order.shipping_status_desc}}</span></li>
              <li><span class="item">下单时间： </span><span>{{order.created_at}}</span></li>
            </ul>
          </el-col>
          <el-col :span="8">
            <ul>
              <li><span class="item">订单金额：</span> <span>￥{{order.total_amount}}</span></li>
              <li><span class="item">应付金额：</span> <span>￥{{order.order_amount}}</span></li>
              <li><span class="item">支付方式：</span> <span>{{order.pay_name}}</span></li>
              <li><span class="item">支付时间： </span><span>{{order.paid_at}}</span></li>
            </ul>
          </el-col>
          <el-col :span="8">
            <ul>
              <li><span class="item">会员ID：</span> <span>{{order.user.id}}</span></li>
              <li><span class="item">会员账号：</span> <span>{{order.user.account}}</span></li>
              <li><span class="item">会员昵称：</span> <span>{{order.user.name}}</span></li>
              <li><span class="item">注册时间： </span><span>{{order.user.created_at}}</span></li>
            </ul>
          </el-col>
        </el-row>
        <div class="line"></div>
        <el-row>
          <el-col :span="24">
            收货信息
          </el-col>
          <el-col :span="24">
            <ul>
              <li><span class="item">收货人：</span> <span>{{order.consignee}}</span></li>
              <li><span class="item">联系方式：</span> <span>{{order.phone}}</span></li>
              <li><span class="item">收货地址：</span> <span>{{order.province}} {{order.city}} {{order.district}} {{order.address}}</span></li>
              <li><span class="item">邮编：</span> <span>{{order.zip_code}}</span></li>
              
              <!-- <li><span class="item">留言： </span><span></span></li> -->
            </ul>
          </el-col>
        </el-row>
        <div class="line"></div>
        <el-row>
          <el-col :span="24"><p>商品信息</p></el-col>
          <el-col :span="24">
            <el-table :data="order.order_goods"
              style="width: 100%" 
              border 
              header-cell-class-name="header-th"
              header-row-class-name="header-tr">
              <!-- <el-table-column
                prop="goods_id"
                label="商品ID"
                width="80">
              </el-table-column> -->
              <el-table-column
                label="商品">
                <template slot-scope="scope">
                  <img :src="scope.row.goods_thumb" style="width:20px; vertical-align:middle; margin-right:5px;">
                  {{scope.row.goods_name}}
                </template>
              </el-table-column>
              <el-table-column
                prop="spec_value"
                label="规格属性">
              </el-table-column>
              <el-table-column
                width="100"
                prop="goods_num"
                label="数量">
              </el-table-column>
              <el-table-column
                prop="goods_price"
                label="单品价格">
              </el-table-column>
              <el-table-column
                prop="full_cut_price"
                label="满减优惠">
              </el-table-column>
              <el-table-column
                label="发货状态">
                <template slot-scope="scope">
                  <span v-if="scope.row.status === 0">未发货</span>
                  <span v-else>已发货</span>
                </template>
              </el-table-column>
              <el-table-column
                label="单品小计">
                <template slot-scope="scope">
                  ￥{{parseFloat(scope.row.goods_num * scope.row.goods_price - scope.row.full_cut_price)}}
                </template>
              </el-table-column>
              <el-table-column
                v-if="order.shipping_status != 1 && order.order_status === 'CONFIRMED' && (order.pay_status === 1 || order.pay_code === 'COD')"
                label="选择发货">
                <template slot-scope="scope">
                  <el-checkbox v-model="scope.row.shipping_checked" :disabled="scope.row.shipping_disabled"></el-checkbox>
                </template>
              </el-table-column>
            </el-table>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24"><p>费用信息</p></el-col>
          <el-col :span="8">
            <ul>
              <li><span class="item">小计：</span><span>{{order.total_amount}}</span></li>
              <li><span class="item">使用余额：</span><span>-{{order.balance}}</span></li>
              <li><span class="item">应付金额：</span><span style="color:red;">{{order.order_amount}}</span></li>
            </ul>
          </el-col>
           <el-col :span="8">
            <ul>
               <li><span class="item">票卷抵扣：</span><span>-{{order.coupon_price}}</span></li>
              <li><span class="item">满减优惠：</span><span>-{{order.full_cut_price}}</span></li>
              <li><span class="item">促销优惠：</span><span>-{{order.promotion_amount}}</span></li>
            </ul>
          </el-col>
           <el-col :span="8">
            <ul>
              <li><span class="item">价格调整：</span><span>-{{order.discount}}</span></li>
              <li><span class="item">积分抵扣：</span><span>-{{order.integral_price}}</span></li>
              <li><span class="item">运费：</span><span>+{{order.shipping_price}}</span></li>
            </ul>
          </el-col>
        </el-row>
        <div class="line"></div>
        <el-row>
          <el-col :span="24">执行操作</el-col>
          <el-col :span="16">
            <el-form ref="form"  :model="action" label-width="100px">
             <!-- 非拼团订单处理 -->
              <template v-if ="!order.team_follow">
                <!-- 确认订单 -->
                <template v-if="order.order_status === 'UNCONFIRMED' && (order.pay_status === 1 || order.pay_code === 'COD')">
                  <el-form-item>
                    <el-input type="textarea" placeholder="请输入备注信息" v-model="action.note"></el-input>
                  </el-form-item>
                  <el-form-item>
                    <el-button @click="confirm" type="primary">确认订单</el-button>
                  </el-form-item>
                </template>
                <!-- 发货 -->
                <template v-else-if="order.shipping_status != 1 && order.order_status === 'CONFIRMED' && (order.pay_status === 1 || order.pay_code === 'COD')">
                  <el-form-item>
                    <el-select style="width:100%;" v-model="action.shipping_code" placeholder="请选择配送方式">
                      <el-option
                        label="顺丰快递"
                        value="shunfeng">
                      </el-option>
                      <el-option
                        label="其他方式"
                        value="other">
                      </el-option>
                    </el-select>
                  </el-form-item>
                  <el-form-item>
                    <el-input placeholder="请输入运单号" v-model.trim="action.shipping_no"></el-input>
                  </el-form-item>
                  <el-form-item>
                    <el-input type="textarea" placeholder="请输入备注信息" v-model="action.note"></el-input>
                  </el-form-item>
                  <el-form-item>
                    <el-button type="primary" @click="delivery" :loading="btnLoading">确认发货</el-button>
                  </el-form-item>
                </template>
                <template v-else>
                  <p class="tips">该订单没有需要执行的操作</p>
                </template>
              </template>
              <!-- 拼团订单处理 -->
              <template v-else>
                <!-- 确认订单 -->
                <template v-if="order.team_follow.team_found.status !== 'SUCCESS'">
                  <p class="tips">该订单正在参与拼团</p>
                </template>
                <template v-else-if="order.order_status === 'UNCONFIRMED' && (order.pay_status === 1 || order.pay_code === 'COD')">
                  <el-form-item>
                    <el-input type="textarea" placeholder="请输入备注信息" v-model="action.note"></el-input>
                  </el-form-item>
                  <el-form-item>
                    <el-button @click="confirm" type="primary">确认订单</el-button>
                  </el-form-item>
                </template>
                <template v-else-if="order.shipping_status != 1 && order.order_status === 'CONFIRMED' && (order.pay_status === 1 || order.pay_code === 'COD')">
                  <el-form-item>
                    <el-select style="width:100%;" v-model="action.shipping_code" placeholder="请选择配送方式">
                      <el-option
                        label="顺丰快递"
                        value="shunfeng">
                      </el-option>
                      <el-option
                        label="其他方式"
                        value="other">
                      </el-option>
                    </el-select>
                  </el-form-item>
                  <el-form-item>
                    <el-input placeholder="请输入运单号" v-model.trim="action.shipping_no"></el-input>
                  </el-form-item>
                  <el-form-item>
                    <el-input type="textarea" placeholder="请输入备注信息" v-model="action.note"></el-input>
                  </el-form-item>
                  <el-form-item>
                    <el-button type="primary" @click="delivery" :loading="btnLoading">确认发货</el-button>
                  </el-form-item>
                </template>
                <template v-else>
                  <p class="tips">该订单没有需要执行的操作</p>
                </template>
              </template>
              
            </el-form>
          </el-col>
        </el-row>
        <div class="line"></div>
        <el-row>
          <el-col :span="24"><p>操作记录</p></el-col>
          <el-col :span="24">
            <el-table :data="order.actions" 
              style="width: 100%" 
              border 
              header-cell-class-name="header-th"
              header-row-class-name="header-tr">
              <el-table-column
                label="操作者">
                <template slot-scope="scope">
                  <span v-if="scope.row.user">{{scope.row.user.name}}</span>
                  <span v-else>系统</span>
                </template>
              </el-table-column>
              <el-table-column
                width="180"
                prop="created_at"
                label="操作时间">
              </el-table-column>
              <el-table-column
                prop="order_status_desc"
                label="订单状态">
              </el-table-column>
              <el-table-column
                prop="pay_status_desc"
                label="支付状态">
              </el-table-column>
              <el-table-column
                prop="shipping_status_desc"
                label="发货状态">
              </el-table-column>
              <el-table-column
                prop="action"
                label="操作">
              </el-table-column>
              <el-table-column
                prop="note"
                label="备注">
              </el-table-column>
            </el-table>
          </el-col>
        </el-row>
      </div>
    </div>
   </section>
</template>
<script>
  export default {
    data () {
      return {
        loading: false,
        order: null,
        btnLoading: false,
        logistics: [],
        action: {
          note: '',
          shipping_code: '',
          shipping_no: '',
          shipping_goods: []
        }
      }
    },
    mounted () {
      this._getData()
    },
    methods: {
      confirm () {
        this.$http.put('/orders/' + this.order.id + '/confirm').then((response) => {
          this.$message.success(response.data.message)
          this.action.note = ''
          this._getData()
        }).catch((error) => {
          console.log(error)
        })
      },
      delivery () {
        // 选中的商品
        let checked = []
        this.order.order_goods.forEach(item => {
          if (item.shipping_checked) {
            checked.push(item.id)
          }
        })
        if (checked.length === 0) {
          this.$message.error('请勾选需要发货的商品')
          return false
        }
        this.action.shipping_goods = checked
        // 判断是否选择物流
        if (!this.action.shipping_code) {
          this.$message.error('请选择配送方式')
          return false
        }
         // 配送单号
        // if (!this.action.shipping_no) {
        //   this.$message.error('请输入运单号')
        //   return false
        // }
        this.btnLoading = true
        this.action.order_id = this.order.id
        this.$http.post('/orders/' + this.order.id + '/delivery', this.action).then((response) => {
          this.$message.success(response.data.message)
          this.action.note = ''
          this.btnLoading = false
          this._getData()
        }).catch((error) => {
          console.log(error)
          this.btnLoading = false
        })
      },
      _getData () {
        this.loading = true
        this.$http.get('/orders/' + this.$route.params.id).then((response) => {
          this.loading = false
          this.order = response.data
        }).catch((error) => {
          this.loading = false
          console.log(error)
        })
      }
    }
  }
</script>
<style scoped lang="scss">
.loading {
  min-height: 200px;
}
.order-detail {
  border: 1px solid #2cbca3;
  width: 1000px;
  margin: 0 auto;
  padding: 20px;
  background: #fff;
  .line {
    border-top: solid 1px #ebeef5;
    padding: 5px 0;
  }
  ul {
    list-style: none;
    font-size: 13px;
    padding: 0;
    li {
      color: #333;
      line-height: 22px;
      .item {
        color: #999;
        width: 100px;
        text-align: right;
        display: inline-block;
      }
    }
  }
}
.tips {
  font-size: 13px;
  color: #999;
}
</style>
<style type="text/css">
  .header-th {
    background: #edfbf8 !important;
  }
</style>